{% extends 'frontend/index_base.html' %}

{% block title %}Scratch练习{% endblock %}

{% block nav_exercise %}active{% endblock %}

{% block extra_css %}
<style>
.level-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.level-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.level-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.level-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #2196F3;
}

.level-description {
    color: #666;
    margin-bottom: 1.5rem;
    min-height: 3em;
}

.btn-enter {
    background: #2196F3;
    color: white;
    padding: 0.5rem 2rem;
    border-radius: 25px;
    transition: background 0.3s ease;
}

.btn-enter:hover {
    background: #1976D2;
    color: white;
}

.view-all-exams {
    margin-top: 3rem;
    text-align: center;
}

.btn-view-all {
    background: #FF9800;
    color: white;
    padding: 1rem 3rem;
    border-radius: 30px;
    font-size: 1.2rem;
    transition: background 0.3s ease;
}

.btn-view-all:hover {
    background: #F57C00;
    color: white;
}

/* 自定义图标样式 */
.level-one-icon {
    color: #FFD700;
}

.level-two-icon {
    color: #FFA726;
}

.level-three-icon {
    color: #FF7043;
}
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row g-4">
        <!-- 一级 -->
        <div class="col-md-4">
            <div class="level-card">
                <div class="level-icon">
                    <i class="fas fa-lightbulb level-one-icon"></i>
                </div>
                <h2 class="level-title">Scratch一级</h2>
                <p class="level-description">适合初学者，包含基础积木和简单动画制作</p>
                <a href="{{ url_for('exercises.scratch_exercises.exam_list', level=1, difficulty=1) }}" class="btn btn-enter">进入练习</a>
            </div>
        </div>
        <!-- 二级 -->
        <div class="col-md-4">
            <div class="level-card">
                <div class="level-icon">
                    <i class="fas fa-star level-two-icon"></i>
                </div>
                <h2 class="level-title">Scratch二级</h2>
                <p class="level-description">包含循环、条件判断等进阶概念</p>
                <a href="{{ url_for('exercises.scratch_exercises.exam_list', level=2, difficulty=2) }}" class="btn btn-enter">进入练习</a>
            </div>
        </div>
        <!-- 三级 -->
        <div class="col-md-4">
            <div class="level-card">
                <div class="level-icon">
                    <i class="fas fa-trophy level-three-icon"></i>
                </div>
                <h2 class="level-title">Scratch三级</h2>
                <p class="level-description">高级编程概念，包括变量、列表和自定义积木</p>
                <a href="{{ url_for('exercises.scratch_exercises.exam_list', level=3, difficulty=3) }}" class="btn btn-enter">进入练习</a>
            </div>
        </div>
    </div>

    <div class="view-all-exams">
        <a href="{{ url_for('exercises.scratch_exercises.exam_list', level='all') }}" class="btn btn-view-all">
            <i class="fas fa-list-ul me-2"></i>查看所有试卷
        </a>
    </div>
</div>
{% endblock %}
